<template>
  <div id="aCoursesList" class="bg-fa of">
  <section class="container">
    <client-only>
    <header class="comm-title">
      <pan-thumb :image="loginInfo.avatar" style="margin-left:40%"/>
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          action="http://119.23.232.220:8222/eduoss/file/upload"
          :on-success="handleAvatarSuccess"
          :on-error="imagefaile"
          :before-upload="beforeAvatarUpload"
          style="margin-left: 60%">
          <el-button size="small" type="primary">更换头像</el-button>
        </el-upload>
    </header>
    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
    <el-tabs :tab-position="tabPosition" style="height: auto;">
      <el-tab-pane label="个人信息">
        <el-form ref="form" :model="loginInfo" label-width="80px">
          <el-form-item label="用户名:">
            <el-input v-model="loginInfo.nickname" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="年龄:" prop="age">
            <el-input-number v-model="loginInfo.age" @change="handleChange" :min="0" :max="150"></el-input-number>
          </el-form-item>
          <el-form-item label="性别:">
            <el-radio-group v-model="loginInfo.sex">
              <el-radio :label="2">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item  prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]"
                        style="width: 250px"
                        label="手机号:">
              <el-input type="text" placeholder="手机号" v-model="loginInfo.mobile"/>
          </el-form-item>

          <el-form-item label="用户签名">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="loginInfo.sign"
              maxlength="100"
              show-word-limit
              autosize
              style="width: 250px"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">修改信息</el-button>
            <el-button type="text" @click="dialogFormVisible = true" icon="el-icon-edit">修改密码</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-dialog title="修改密码" :visible.sync="dialogFormVisible" center>
        <el-form :model="password">
          <el-form-item label="原来密码:" :label-width="formLabelWidth" style="margin-left: 300px">
            <el-tooltip placement="top">
              <div slot="content">使用微信登陆<br/>初始密码为123456</div>
              <el-input placeholder="请输入密码" v-model="password.oldpassword" show-password style="width: 200px"></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="新密码:" :label-width="formLabelWidth" style="margin-left: 300px">
            <el-input placeholder="请输入密码" v-model="password.newpassword" show-password style="width: 200px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updatePassword">确 定</el-button>
        </div>
      </el-dialog>

      <el-tab-pane label="收藏课程">
        <div class="mt40">
          <!-- /无数据提示 开始-->
          <section class="no-data-wrap" v-if="data.total==0">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">没有收藏课程</span>
          </section>
          <!-- /无数据提示 结束-->
          <!-- 数据列表 开始-->
          <article v-if="data.total>0" class="comm-course-list">
            <ul id="bna" class="of">
              <li v-for="item in data.items" :key="item.id">
                <div class="cc-l-wrap">
                  <section class="course-img">
                    <img :src="item.cover" class="img-responsive" alt="听力口语">
                    <div class="cc-mask">
                      <a :href="'/course/'+item.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                    </div>
                  </section>
                  <h3 class="hLh30 txtOf mt10">
                    <a :href="'/course/'+item.id" :title="item.title" class="course-title fsize18 c-333">{{ item.title }}</a>
                  </h3>
                  <section class="mt10 hLh20 of">
                    <span v-if="Number(item.price) === 0" class="fr jgTag bg-green">
                        <i class="c-fff fsize12 f-fA">免费</i>
                    </span>
                    <span class="fl jgAttr c-ccc f-fA">
                        <i class="c-999 f-fA">{{ item.viewCount }}人学习</i>
                        |
                        <i class="c-999 f-fA">{{item.sum}}评论</i>
                    </span>
                  </section>
                </div>
              </li>
            </ul>
            <div class="clear"/>
          </article>
          <!-- /数据列表 结束-->
        </div>
        <!-- 公共分页 开始 -->
        <div>
          <div class="paging">
            <a
              :class="{undisable: !data.hasPrevious}"
              href="#"
              title="首页"
              @click.prevent="gotoPage(1)">首</a>
            <a
              :class="{undisable: !data.hasPrevious}"
              href="#"
              title="前一页"
              @click.prevent="gotoPage(data.current-1)">&lt;</a>
            <a
              v-for="page in data.pages"
              :key="page"
              :class="{current: data.current == page, undisable: data.current == page}"
              :title="'第'+page+'页'"
              href="#"
              @click.prevent="gotoPage(page)">{{ page }}</a>
            <a
              :class="{undisable: !data.hasNext}"
              href="#"
              title="后一页"
              @click.prevent="gotoPage(data.current+1)">&gt;</a>
            <a
              :class="{undisable: !data.hasNext}"
              href="#"
              title="末页"
              @click.prevent="gotoPage(data.pages)">末</a>
            <div class="clear"/>
          </div>
        </div>
        <!-- 公共分页 结束 -->
      </el-tab-pane>
      <el-tab-pane label="购买课程订单">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="orderNo"
            label="订单号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="courseTitle"
            label="购买课程名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="teacherName"
            label="授课讲师">
          </el-table-column>
          <el-table-column
            prop="status"
            label="支付状态">
          </el-table-column>
          <el-table-column
            prop="totalFee"
            label="订单金额">
          </el-table-column>
          <el-table-column
            prop="gmtCreate"
            label="购买时间">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    </client-only>
  </section>
  </div>
</template>
<script>
  import PanThumb from '@/components/PanThumb/'
  import userApi from '@/api/login'
  import collect from '@/api/collect'
  import order from '@/api/order'
export default {
    components:{PanThumb},
  data() {
    return {
      page:1,
      data:{},
      limit:4,
      loginInfo: {
        age: '',
        avatar: '',
        mobile: '',
        nickname: '',
        sex: '',
        sign: ''
      },
      dialogFormVisible: false,
      imagrUrl: "",
      tabPosition: 'left',
      password:{
        oldpassword:'',
        newpassword:''
      },
      formLabelWidth: '120px',
      tableData:[],
    };
  },
  mounted() {
      this.showInfo()
      this.initCoolect()
      this.initOrde()
  },
  methods:{
    initOrde(){
     return  order.getMenberOrder().then(response => {
        this.tableData = response.data.data.list

      })
    },
    initCoolect(){
      collect.getPCollet(1, 4).then(response => {
        this.data = response.data.data
      })
    },
    gotoPage(page){
      collect.getPCollet(page, this.limit).then(response => {
        this.data = response.data.data
      })
    },
    showInfo() {
      userApi.getLoginInfo().then(response => {
        this.loginInfo=response.data.data.item
      })
    },
    handleAvatarSuccess(res,file){
      this.imagrUrl=res.data.url
      this.loginInfo.avatar=res.data.url
    },
    imagefaile(){
      this.$message({
        type:"error",
        message:"上传失败"
      })
    },
    checkPhone (rule, value, callback) {
      if (!(/^1[34578]\d{9}$/.test(value))) {
        return callback(new Error('手机号码格式不正确'))
      }
      return callback()
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    onSubmit(){
      userApi.updateInfo(this.loginInfo).then(response => {
        if(response.data.code==20000){

          this.$message({
            type:"success",
            message: response.data.message
          })
        }

      })
    },
    handleChange(){

    },
    updatePassword(){
      userApi.updatePassword(this.password).then(response => {
        if(response.data.code==20000){
          this.dialogFormVisible=false
          this.$message({
            type:"success",
            message: response.data.message
          })
        }else {
          this.$message({
            type:"error",
            message: response.data.message
          })
        }

      })
    }
  }
}
</script>
